/*
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2024-06-03 22:57:27
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2024-06-26 23:26:50
 * @FilePath: /chat-ai-plus/src/components/Header/Header.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { defineComponent, defineEmits, ref, getCurrentInstance } from 'vue';
import './index.scss';
import { navigateTo } from '@/utils/uni';
import useUserStore from '@/store/modules/user';
import popup from '@/components/PopupSider/index';
import { useI18n } from 'vue-i18n';

export default defineComponent({
  name: 'Header',
  props: {
    modelValue: {
      type: String,
      default: 'home'
    }
  },
  setup(props, { attrs, emit }) {
    const userStore = useUserStore();
    const { t } = useI18n();

    const handleChange = (value) => {
      emit('update:modelValue', value)
    };

    const handleClick = () => {
      navigateTo('center')
    };
    const instance = getCurrentInstance();
    const handleOpenPopup = () => {

      popup.open(instance)
    }


    return () => {

      return (<view class={[`header align-items_center justify_between px_default ${attrs.class}`]}>

        <view>
          <view class=" d-none d-lg-block">

            <view class="tabs-container" >

              {/* <label class="tab-label" onClick={() => handleChange('home')}>
                <view class={[`tab-item ${props.modelValue === 'home' ? 'active' : ''}`]}>
                  <u-icon class="icon" name="home"></u-icon>
                  <view>{t('app.header.home')}</view>
                </view>
              </label> */}

              {/* <label class="tab-label" onClick={() => handleChange('charts')}>
                <view class={[`tab-item ${props.modelValue === 'charts' ? 'active' : ''}`]}>
                  <u-icon class="icon" name="chat"></u-icon>
                  <view>{t('app.header.charts')}</view>
                </view>
              </label>

              <label class="tab-label" onClick={() => handleChange('store')}>
                <view class={[`tab-item ${props.modelValue === 'store' ? 'active' : ''}`]}>
                  <u-icon class="icon" name="bag"></u-icon>
                  <view>{t('app.header.store')}</view>
                </view>
              </label > */}
            </view >
          </view>

          <view class="d-block d-lg-none">
            <u-icon name="list-dot" size="32" onclick={handleOpenPopup}></u-icon>
          </view>

        </view>
        <view>
        {/* 
          <u-image
            height="40px"
            width="40px"
            src={userStore.user?.avatar}
            shape="circle"
            onClick={handleClick}
          ></u-image> */}

        <u-avatar
          src=""
          fontSize="22"
          onClick={handleClick}
        ></u-avatar>
      </view>

      </view >);
    }
  },
});